<template>
  <div class="details">
    <header-top></header-top>
    <nav-bar></nav-bar>
    <!-- 面包屑 -->
    <div class="crumbs container">
      <router-link to="/hotel">婚宴酒店</router-link>
      &gt;
      <router-link to="/reservation">婚宴酒店</router-link>
      &gt;
      <span>{{ results.headline }}</span>
    </div>
    <!-- hotel-show -->
    <div class="container show">
      <!-- photo-show -->
      <div class="photo-show">
        <img :src="ImgUrl" alt="" />
        <div class="photos">
          <img
            :src="results.pic_1"
            alt=""
            @mouseenter="getUrl(results.pic_1)"
          />
          <img
            :src="results.pic_2"
            alt=""
            @mouseenter="getUrl(results.pic_2)"
          />
          <img
            :src="results.pic_3"
            alt=""
            @mouseenter="getUrl(results.pic_3)"
          />
          <img
            :src="results.pic_4"
            alt=""
            @mouseenter="getUrl(results.pic_4)"
          />
          <img
            :src="results.pic_5"
            alt=""
            @mouseenter="getUrl(results.pic_5)"
          />
        </div>
      </div>
      <!-- 酒店简介 -->
      <div class="info-show">
        <p class="title">{{ results.headline }}</p>
        <p class="price">
          ¥<span>{{ results.min_price }}-{{ results.max_price }}</span
          >/桌
        </p>
        <div class="area-info">
          <div class="area">
            <p>
              区域<span>{{ results.county }}</span>
            </p>
            <p>
              类型<span>{{ results.genre }}</span>
            </p>
          </div>
          <div class="canteen">
            <p>
              <span>{{ results.canteen }}</span
              >个婚宴厅
            </p>
            <p>
              <span>{{ results.menu }}</span
              >套婚宴菜单
            </p>
            <p>
              <span>{{ results.min_table }}-{{ results.max_table }}</span
              >桌婚宴席
            </p>
          </div>
        </div>
        <button class="Query" @click="toggleDq">查询档期</button>
        <p class="site">
          <i></i> 酒店地址:<span>{{ results.place }}</span>
        </p>
        <p class="star">
          <i></i><span>{{ results.fans }}</span
          >人关注该酒店
        </p>
      </div>
      <!-- link -->
      <div class="link">
        <p>找好友帮我参考</p>
        <div class="link-img">
          <router-link to="#"></router-link>
          <router-link to="#"></router-link>
          <router-link to="#"></router-link>
        </div>
      </div>
    </div>
    <!-- 细节介绍 -->
    <div class="container">
      <!-- 细节 -->
      <div class="detail">
        <div class="tabs">
          <router-link to="">婚宴厅</router-link>
          <router-link to="">婚宴菜单</router-link>
          <router-link to="">酒店介绍</router-link>
          <router-link to="">酒店优惠(<span>1</span>)</router-link>
          <router-link to="">地理位置</router-link>
          <router-link to="">用户评价(<span>36</span>)</router-link>
        </div>
        <div class="banquet box">
          <div class="title">
            <i></i>
            <p>婚宴厅</p>
            <span>点击图片预览婚宴厅大图</span>
          </div>
          <div class="box">
            <div class="hall" v-for="(item, i) in banquet" :key="i">
              <!-- 通过click事件把值传回 -->
              <div class="picture" @click="Loadpicture(item)">
                <img :src="item.adPic" :alt="item.hall" />
              </div>
              <div class="info">
                <p class="place">{{ item.hall }}</p>
                <p>
                  桌数:<span>{{ item.tables }}</span>
                </p>
                <p>
                  面积:<span>{{ item.area }}</span>
                </p>
                <p>
                  层高:<span>{{ item.height }}m</span>
                </p>
                <p>
                  柱子:<span>{{ item.pillar }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="menu box">
          <div class="title">
            <i></i>
            <p>菜单</p>
          </div>
          <div class="menu-item" v-for="(item, i) in menus" :key="i">
            <div class="left-menu">
              <p>{{ item.title }}</p>
              <div>
                ¥<span>{{ item.price }}</span
                >/桌
              </div>
            </div>
            <div class="right-menu">
              <div>
                <span>{{ item.set_meal }}</span>
              </div>
              <div>
                <p v-for="(val, i) in item.dishes.split(',')" :key="i">
                  {{ val }}
                </p>
              </div>
              <span>{{ item.other }}</span>
            </div>
            <div></div>
          </div>
        </div>
        <div class="box introduce">
          <div class="title">
            <i></i>
            <p>酒店介绍</p>
          </div>
          <p>{{ hotelInfo.introduce }}</p>
        </div>
        <div class="discounts box">
          <div class="title">
            <i></i>
            <p>
              酒店优惠(<span>{{ hotelDiscounts.length }}</span
              >)
            </p>
          </div>
          <p v-for="(item, i) in hotelDiscounts" :key="i">{{ item }}</p>
        </div>
        <div name="are" class="location box">
          <div class="title">
            <i></i>
            <p>地理位置</p>
          </div>
          <div id="hotelMap"></div>
        </div>
        <div class="evaluate box">
          <div class="title">
            <i></i>
            <p>用户评价(<span>45</span>)</p>
          </div>
          <div class="results">
            <div class="portrait">
              <img
                src="../../public/img/leiyao/o_1dj91bnvt17dg1u1r1ikeev43h19.png"
                alt=""
              />
            </div>
            <div class="info">
              <div class="star">
                <p>手机用户2457</p>
                <div>
                  <i></i>
                  <i></i>
                  <i></i>
                  <i></i>
                  <i></i>
                </div>
              </div>
              <p></p>
              <span>2019-11-15</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 预定box -->
    <div class="openbox_dq" v-show="dqBox">
      <div class="box">
        <span class="close" @click="toggleDq">×</span>
        <h2>查看酒店档期</h2>
        <p class="phone">
          输入手机号，立刻获取<span
            >酒店最新优惠＋婚礼纪婚宴顾问免费咨询福利</span
          >
        </p>
        <input type="text" placeholder="请输入您的手机号" name="" id="" />
        <button>提交并查看结果</button>
        <p class="agreement">
          <span>提交表示您已阅读并同意</span>
          <router-link to="/*">《婚礼纪用户使用协议》</router-link>
        </p>
      </div>
    </div>
    <!-- 宴厅细节展示图 -->
    <div class="box_picture" v-show="PicBox">
      <div class="box">
        <p @click="PicBox = false">×</p>
        <div class="all_pic">
          <div class="prev" @click="changePic('prev')"></div>
          <div class="photo">
            <img :src="detailed_drawingPic" alt="" />
          </div>
          <div class="next" @click="changePic('next')"></div>
        </div>

        <ul class="picture">
          <li
            @click="detailed_drawingImg(item, i)"
            v-for="(item, i) of detailed_drawing"
            :key="i"
          >
            <img :src="item" alt="" />
          </li>
        </ul>
        <div class="msg">
          <p>
            <span>{{ PicInfo.hall }}</span
            ><span>({{ detailed_drawing.length }})</span>
          </p>
          <div class="interior">
            <p>
              桌数:<span>{{ PicInfo.tables }}</span>
            </p>
            <p>
              最佳桌数:<span>{{ PicInfo.suitableTb }}</span
              >m²
            </p>
            <p>
              面积:<span>{{ PicInfo.area }}</span
              >m
            </p>
            <p>
              层高:<span>{{ PicInfo.height }}</span>
            </p>
            <p>
              柱子:<span>{{ PicInfo.pillar }}</span>
            </p>
            <p>
              最低消费:<span>{{ PicInfo.minimum_charge }}</span>
            </p>
            <p>
              形状:<span>{{ PicInfo.shape }}</span>
            </p>
            <p>
              其他:<span>{{ PicInfo.other }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 引入页脚 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
import headerTop from "../components/leiyao/header";
import navBar from "../components/leiyao/navBar";
import Sidebar from '../components/leiyao/sidebar.vue';
export default {
  components: {
    headerTop,
    navBar,
    Sidebar
  },
  props: ["hid"],
  data() {
    return {
      results: "",
      ImgUrl: "",
      banquet: "",
      dqBox: false,
      PicBox: false,
      PicInfo: {},
      detailed_drawing: "",
      detailed_drawingPic: "",
      hotelInfo: {
        longitude: 108.123,
        latitude: 36.51,
      }, //细节信息
      hotelDiscounts: [], //优惠信息
      menus: [], //菜单表,含多个菜单
      picId: 0,
      map: "",
    };
  },
  methods: {
    // 点击婚宴厅细节图后把链接返回给主图
    detailed_drawingImg(url, i) {
      this.detailed_drawingPic = url;
      this.picId = i;
    },
    // 获取婚宴厅数据
    banquetInfo() {
      this.axios.get(`/hotelMsg?id=${this.hid}`).then((res) => {
        this.banquet = res.data.results;
      });
      // 获取酒店地理位置优惠等信息
      this.axios.get(`/hotelInfo?id=${this.hid}`).then((res) => {
        this.hotelInfo = res.data.results[0];
        // 将优惠分割为数组
      this.hotelDiscounts = this.hotelInfo.discounts.split("|");
      this.LoadMap()
      })
      
    },
    // 获取酒店菜品
    menuInfo() {
      this.axios.get(`/hotelmenu?id=${this.hid}`).then((res) => {
        this.menus = res.data.results;
      });
    },
    // 获取展示图
    LoadData() {
      this.axios.get("/hotel").then((res) => {
        this.results = res.data.results[this.hid - 1];
        this.ImgUrl = this.results.pic_1;
      });
    },
    // 改变婚宴图片详情表主图
    changePic(name) {
      let piclen = this.detailed_drawing.length;

      if (name == "prev") {
        if (this.picId > 0) {
          this.picId--;
          this.detailed_drawingPic = this.detailed_drawing[this.picId];
        }
      }
      if (name == "next") {
        if (this.picId < piclen - 1) {
          this.picId++;
          this.detailed_drawingPic = this.detailed_drawing[this.picId];
        }
      }
    },
    // 为展示图大图赋链接
    getUrl(ImgUrl) {
      this.ImgUrl = ImgUrl;
    },
    // 切换档期预定
    toggleDq() {
      if (this.dqBox) {
        this.dqBox = false;
      } else {
        this.dqBox = true;
      }
    },
    // 婚宴厅图片
    Loadpicture(val) {
      this.PicBox = true;
      // 单条婚宴厅图片的所有数据
      this.PicInfo = val;
      // 将单条数据的图片裁剪为数组
      this.detailed_drawing = this.PicInfo.detailed_drawing.split(",");
      console.log(this.detailed_drawing, 321);

      // 初始化婚宴厅细节图的主图
      this.detailed_drawingPic = this.detailed_drawing[0];
      
    },
    // 高德地图
    LoadMap() {
      this.map = new AMap.Map("hotelMap", {
        center: [this.hotelInfo.longitude, this.hotelInfo.latitude],
        zoom: 14,
      });

      let marker = new AMap.Marker({
        position: [this.hotelInfo.longitude, this.hotelInfo.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      });
      AMap.plugin([
        "AMap.ToolBar",
        "AMap.Scale",
        // "AMap.OverView",
        // "AMap.MapType",
        "AMap.Geolocation",
      ])
      this.map.addControl(new AMap.Scale());
      this.map.addControl(new AMap.ToolBar());
      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      this.map.addControl(new AMap.Geolocation());
      this.map.add(marker);
    },
  },
  mounted() {
    this.LoadData();
    this.banquetInfo();
    this.menuInfo();
    // this.LoadMap()
    
  },
};
</script>
<style scoped>
/* 来自APP.vue */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 禁止复制  */
  /* user-select:none; */
  /*光标透明 */
  caret-color: rgba(0, 0, 0, 0);
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a {
  text-decoration: none;
  outline: none;
}
ul li {
  list-style: none;
}
.btn {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  outline: none;
}
.btn-primary {
  background-color: #f83244;
  color: #fff;
}
.a_hover {
  color: #333;
}
.a_hover:hover {
  color: #f83244;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}

#hotelMap {
  width: 850px;
  height: 340px;
}
/* 细节介绍 */
.detail {
  width: 958px;
  margin-top: 40px;
  margin-bottom: 70px;
  background: #fafafa;
  border: 1px solid #e7e7e7;
}
.detail > .box {
  margin-top: 40px;
  padding: 0 55px 10px 55px;
}
.detail .tabs {
  display: flex;
  align-items: center;
  height: 40px;
  background: #fafafa;
  border-bottom: 1px solid #e7e7e7;
}
.detail .tabs > a {
  text-align: center;
  width: 136px;
  color: #666666;
  font-size: 14px;
}
.detail .tabs > a:hover {
  color: #f83244;
}

.detail .title {
  display: flex;
  align-items: center;
  height: 30px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ccc;
}
.detail .title > i {
  background: url(../../public/img/leiyao/o_1afssmb1g1hf76kinhl5h27eu7.png);
  width: 18px;
  height: 18px;
}
.detail .title > p {
  font-size: 18px;
  color: #333;
  margin-left: 10px;
}
.detail .title > p > span {
  color: #f83244;
}
.detail .title > span {
  margin-left: 10px;
  font-weight: normal;
  font-size: 14px;
  color: #333;
}
.detail > .banquet > .box {
  display: flex;
  margin-top: 24px;
  flex-wrap: wrap;
}
/* 菜单 */
.detail > .menu > .menu-item {
  width: 100%;
  min-height: 218px;
  background: url(../../public/img/leiyao/o_1ahqag5v4gqb1pjn1ume1rf362p7.jpg) no-repeat;
  background-size: 100% 100%;
  margin-top: 24px;
  display: flex;
  padding: 30px;
}
.detail > .menu > .menu-item > .left-menu,
.detail > .menu > .menu-item > .right-menu {
  display: flex;
}
.detail > .menu > .menu-item > .left-menu {
  flex-direction: column;
  align-items: center;
  width: 195px;
}
.detail > .menu > .menu-item > .left-menu > p {
  font-size: 14px;
  color: #333;
}
.detail > .menu > .menu-item > .left-menu > div {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #f83244;
  color: #fff;
  text-align: center;
  line-height: 112px;
  font-size: 14px;
  margin-top: 24px;
}
.detail > .menu > .menu-item > .left-menu > div > span {
  font-size: 24px;
}
.detail > .menu > .menu-item > .right-menu {
  width: 550px;
  font-size: 14px;
  flex-direction: column;
}
.detail > .menu > .menu-item > .right-menu > div > span {
  color: #f83244;
  border-bottom: 2px solid #f83244;
  padding-bottom: 8px;
}
.detail > .menu > .menu-item > .right-menu > div {
  flex-wrap: wrap;
  display: flex;
  color: #666;
}
.detail > .menu > .menu-item > .right-menu > div > p {
  width: 20%;
  margin-top: 8px;
}
.detail > .menu > .menu-item > .right-menu > span:last-child {
  font-size: 12px;
  margin-top: auto;
  color: #999999;
}
/* 酒店介绍 */
.detail > .introduce > p {
  width: 50%;
  font-size: 14px;
  color: #666666;
  margin-top: 15px;
  line-height: 28px;
}
.detail > .discounts > p {
  color: #666;
  font-size: 14px;
  line-height: 24px;
}
.detail > .discounts > p:first-child {
  margin-top: 20px;
}
/* 地图 */
.detail > .location > #hotelMap {
  width: 850px;
  height: 340px;
  background-color: #eee;
  margin-top: 20px;
}
/* 评价 */
.detail > .evaluate > .results {
  display: flex;
  margin-top: 30px;
}
.detail > .evaluate > .results > .portrait {
  width: 50px;
  height: 50px;
  margin-right: 25px;
}
.detail > .evaluate > .results > .portrait img {
  border-radius: 50%;
  height: 100%;
}
.detail > .evaluate > .results > .info {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #666666;
  line-height: 22px;
}
.detail > .evaluate > .results > .info > .star {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
}
.detail > .evaluate > .results > .info > .star > div {
  display: flex;
}
.detail > .evaluate > .results > .info > .star i {
  width: 12px;
  height: 12px;
  background: url(../../public/img/leiyao/o_1an1ll37ge1kd94jlvdum1por7.png);
  background-position: -126px -200px;
  margin: 0 1px;
}
.detail > .evaluate > .results > .info > span {
  color: #999999;
}
/* 宴厅 */
.detail > .banquet > .box > .hall {
  display: flex;
  width: 374px;
  cursor: pointer;
  margin-bottom: 24px;
  margin-right: 40px;
}
.detail > .banquet > .box > .hall > .picture {
  width: 270px;
  height: 180px;
}
.detail > .banquet > .box > .hall > .picture > img {
  width: 100%;
  height: 100%;
}
.detail > .banquet > .box > .hall > .info {
  display: flex;
  flex-direction: column;
  width: 86px;
  margin-left: 14px;
  font-size: 12px;
  color: #666;
}
.detail > .banquet > .box > .hall > .info > .place {
  font-size: 16px;
  color: #333;
  margin-top: 4px;
  margin-bottom: 10px;
}
.detail > .banquet > .box > .hall > .info > p {
  margin-top: 12px;
}
/* show */
.show {
  display: flex;
}
.show img {
  border: 1px solid #e8e8e8;
}
/* 右侧link */
.show > .link {
  display: flex;
  flex-direction: column;
}
.show > .link > p {
  color: #666;
  font-size: 12px;
  text-align: right;
  margin-bottom: 12px;
}
.show > .link > .link-img {
  display: flex;
}
.show > .link > .link-img > a {
  width: 40px;
  height: 40px;
  padding: 0;
  display: block;
  margin: 5px;
}
.show > .link > .link-img > a:nth-child(1) {
  background: rgba(0, 0, 0, 0)
    url(../../public/img/leiyao/o_1c1chdefn18vs1ppp1rs91oiv2ll9.jpg) no-repeat;
}
.show > .link > .link-img > a:nth-child(2) {
  background: rgba(0, 0, 0, 0)
    url(../../public/img/leiyao/o_1c1chdefo1e551dle6skt4n1difa.jpg) no-repeat;
}
.show > .link > .link-img > a:nth-child(3) {
  background: rgba(0, 0, 0, 0)
    url(../../public/img/leiyao/o_1c1chdefo17521ud31j2u1ef91s03b.jpg) no-repeat;
}

/* 简介 */
.show > .info-show {
  width: 570px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
}
.show > .info-show > .title {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  line-height: 24px;
}
.show > .info-show > .price {
  color: #f83244;
  font-size: 18px;
  margin-top: 22px;
}
.show > .info-show > .price > span {
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
  margin: 0 5px;
}
.show > .info-show > .area-info {
  display: flex;
  flex-direction: column;
}
.show > .info-show > .area-info > div {
  display: flex;
  font-size: 14px;
}
.show > .info-show > .area-info span {
  color: #333;
  margin-right: 10px;
}
.show > .info-show > .area-info > .area {
  color: #999999;
  margin-top: 20px;
}
.show > .info-show > .area-info > .area > p > span {
  margin-left: 6px;
}
.show > .info-show > .area-info > .area p:first-child {
  margin-right: 10px;
  border-right: 1px solid #ccc;
}
.show > .info-show > .area-info > .canteen {
  margin-top: 20px;
}
.show > .info-show > .area-info > .canteen span {
  font-weight: bold;
  color: #fe7e33;
}
.show > .info-show > .area-info > .canteen > p:nth-child(3) {
  margin-right: 10px;
  border-right: 0;
}
.show > .info-show > .area-info > .canteen > p {
  margin-right: 10px;
  border-right: 1px solid #ccc;
  padding-right: 10px;
}
.show > .info-show .Query {
  outline: none;
  border: none;
  width: 150px;
  height: 50px;
  font-size: 18px;
  margin-top: 30px;
  background-color: #f83244;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}
.show > .info-show .Query:hover {
  opacity: 0.8;
}
.show > .info-show > .site {
  font-size: 14px;
  color: #666666;
  margin-top: 30px;
}
.show > .info-show > .star {
  font-size: 12px;
  margin-top: auto;
  color: #666666;
}
.show > .info-show > .star > i {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: url(../../public/img/leiyao/o_1an1ll37ge1kd94jlvdum1por7.png);
  background-position: -126px -200px;
  margin-top: -1px;
  margin-right: 5px;
}
.show > .info-show > .site > i {
  width: 9px;
  height: 12px;
  background: url(../../public/img/leiyao/o_1bs4kal0rjn81uu6an11u446lh7.png) no-repeat;
  float: left;
  margin-right: 5px;
  margin-top: 2px;
}
/* 宣传照 */
.show > .photo-show {
  display: flex;
  flex-direction: column;
  width: 480px;
}
.show > .photo-show > img {
  width: 480px;
  height: 322px;
}
.show > .photo-show > .photos {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  height: 62px;
}
.show > .photo-show > .photos > img {
  width: 19%;
  background-color: #e8e8e8;
}
/* 面包屑导航 */
.crumbs {
  height: 48px;
  line-height: 48px;
  font-size: 12px;
  color: #666;
}
.crumbs > a {
  font-size: 12px;
  color: #666;
}
.crumbs > a:hover {
  color: #f83244;
}

/* 预约档期全屏图 */
.openbox_dq {
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  z-index: 999;
}
.openbox_dq > .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  width: 560px;
  padding-bottom: 40px;
}
.openbox_dq > .box .close {
  margin-left: auto;
  padding-top: 10px;
  padding-right: 20px;
  font-size: 30px;
  color: #aaa;
  cursor: pointer;
}
.openbox_dq > .box h2 {
  color: #333;
  font-size: 20px;
  text-align: center;
  font-weight: normal;
}
.openbox_dq > .box .phone {
  color: #666;
  font-size: 14px;
  margin-top: 26px;
  text-align: center;
}
.openbox_dq > .box .phone span {
  color: #f83244;
  margin-left: 3px;
}
.openbox_dq > .box input {
  margin-top: 20px;
  height: 40px;
  border: 1px solid #e8e8e8;
  width: 300px;
  outline: 0;
  padding-left: 11px;
  font-size: 14px;
}
.openbox_dq > .box button {
  height: 40px;
  border: 0;
  border-radius: 2px;
  background-color: #f83748;
  color: #fff;
  font-size: 18px;
  margin-top: 19px;
  width: 300px;
  cursor: pointer;
  outline: none;
}
.openbox_dq > .box .agreement {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.openbox_dq > .box .agreement a {
  color: #f83748;
}
.openbox_dq > .box .agreement a:hover {
  text-decoration: underline;
}
/* 宴厅细节图 */
.box_picture {
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
  z-index: 999;
}
.box_picture > .box {
  width: 920px;
  height: 790px;
  background: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.box_picture > .box > p {
  margin-left: auto;
  padding-top: 15px;
  padding-right: 20px;
  font-size: 30px;
  color: #666;
  cursor: pointer;
}
.box_picture > .box > .all_pic {
  width: 800px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: red; */
}
.box_picture > .box > .all_pic > .prev {
  width: 40px;
  height: 74px;
  background: url(http://qnm.hunliji.com/o_1akairu051r0k136vi0cvbl11rm7.png)
    no-repeat;
  background-position: 0 -74px;
}
.box_picture > .box > .all_pic > .prev:hover {
  background-position: 0 0;
}
.box_picture > .box > .all_pic > .next {
  width: 40px;
  height: 74px;
  background: url(http://qnm.hunliji.com/o_1akairu051r0k136vi0cvbl11rm7.png)
    no-repeat;
  background-position: -40px -74px;
}
.box_picture > .box > .all_pic > .next:hover {
  background-position: -40px 0;
}
.box_picture > .box > .all_pic > .photo {
  width: 800px;
  height: 450px;
  display: flex;
  justify-content: center;
}
.box_picture > .box > .all_pic > .photo img {
  max-width: 100%;
  max-height: 100%;
}
.box_picture > .box > .picture {
  width: 800px;
  height: 70px;
  overflow: hidden;
  display: flex;
  margin-top: 20px;
}
.box_picture > .box > .picture > li {
  width: 68px;
  height: 68px;
  margin: 0 5px;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  outline: 0;
  background: #d9d9d9;
}
.box_picture > .box > .picture > li img {
  width: 68px;
  height: 68px;
}
.box_picture > .box > .picture > li:hover {
  border: 1px solid #ff5c5c;
}
.box_picture > .box > .msg {
  width: 800px;
  margin-top: 20px;
}
.box_picture > .box > .msg > p {
  font-size: 16px;
  color: #333;
}
.box_picture > .box > .msg > p > span {
  margin-right: 30px;
}
.box_picture > .box > .msg > .interior {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.box_picture > .box > .msg > .interior > p {
  margin-right: 30px;
  font-size: 12px;
  color: #333;
  margin-top: 20px;
}
.box_picture > .box > .msg > .interior > p > span {
  margin-left: 6px;
}
</style>
